<template>
	<w-collapse v-model="SOPcollapseVisible" disabled :showArrow="false" title="标准SOP">
		<el-form ref="form" :model="procedureDetails" size="mini" label-width="100px" inline>
			<fx-detials-form-row>
				<el-form-item slot="left" label="消耗品：" class="avatar-block form-item-image">
					<fx-upload
						:fileList="expendableUrls"
						:limit="9" type="image"
						:notes="true"
						:fileSize='5'
						class="avatar-upload-content"
						@on-change="onExpendableUrlChange"
					></fx-upload>
				</el-form-item>
				<template slot="right">
					<el-form-item prop="qualityRequirements" label="质量要求：">
            <el-input
						v-model="procedureDetails.qualityRequirements"
						type="textarea"
						:rows="3"
						:maxlength="200"
						placeholder="请输入质量要求："
						class="form-item-input"
						show-word-limit
						resize="none"
					/>
					</el-form-item>
					<el-form-item prop="processingRequirement" label="加工要求：">
            <el-input
						v-model="procedureDetails.processingRequirement"
						type="textarea"
						:rows="3"
						:maxlength="200"
						placeholder="请输入加工要求："
						class="form-item-input"
						show-word-limit
						resize="none"
					/>
					</el-form-item>
					<el-form-item slot="right" prop="packingRequirement" label="包装要求：">
            <el-input
						v-model="procedureDetails.packingRequirement"
						type="textarea"
						:rows="3"
						:maxlength="200"
						placeholder="请输入包装要求："
						class="form-item-input"
						show-word-limit
						resize="none"
					/>
					</el-form-item>
				</template>
			</fx-detials-form-row>
			<fx-detials-form-row>
				<el-form-item slot="left" label="产出品：" class="avatar-block form-item-image">
					<fx-upload
						:fileList="productionUrls"
						:limit="9" type="image"
						:notes="true"
						:fileSize='5'
						class="avatar-upload-content"
						@on-change="onProductionUrlChange"
					></fx-upload>
				</el-form-item>
				<template slot="right">
					<el-form-item prop="performanceStandard" label="作业说明：">
            <el-input
						v-model="procedureDetails.performanceStandard"
						type="textarea"
						:rows="3"
						:maxlength="200"
						placeholder="请输入作业说明："
						class="form-item-input"
						show-word-limit
						resize="none"
					/>
					</el-form-item>
					<el-form-item prop="remark" label="备注：">
						<el-input
						v-model="procedureDetails.remark"
						type="textarea"
						:rows="3"
						:maxlength="200"
						placeholder="请输入备注："
						class="form-item-input"
						show-word-limit
						resize="none"
					/>
					</el-form-item>
					<el-form-item slot="right" prop="packingRequirement" label="附件：">
            <fx-upload :fileList="fileList" :limit="1" :fileSize='20' class="upload-content" :notes='true' @on-change="onFileChange"></fx-upload>
					</el-form-item>
				</template>
			</fx-detials-form-row>
		</el-form>
	</w-collapse>
</template>
<script>
export default {
	name: 'SOP',
	props: {
		procedureDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		disabled: Boolean
	},
	watch: {
		'procedureDetails.expendableUrls' () {
			this.initExpendableUrls()
		},
		'procedureDetails.productionUrls' () {
			this.initProductionUrls()
		},
		'procedureDetails.fileUrls' () {
			this.initFileList()
		}
	},
	data () {
		return {
			SOPcollapseVisible: true,
			expendableUrls: [],
			productionUrls: [],
			fileList: []
		}
	},
	methods: {
		initExpendableUrls () {
			this.$nextTick(() => {
				this.expendableUrls = this.procedureDetails.expendableUrls ? this.procedureDetails.expendableUrls : []
			})
		},
		initProductionUrls () {
			this.$nextTick(() => {
				this.productionUrls = this.procedureDetails.productionUrls ? this.procedureDetails.productionUrls : []
			})
		},
		initFileList () {
			this.$nextTick(() => {
				this.fileList = this.procedureDetails.fileUrls ? this.procedureDetails.fileUrls : []
			})
		},
		onExpendableUrlChange (list) {
			this.procedureDetails.expendableUrls = list || []
		},
		onProductionUrlChange (list) {
			this.procedureDetails.productionUrls = list || []
		},
		onFileChange (list) {
			this.procedureDetails.fileUrls = list || []
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.avatar-upload-content {
	width: 300px
}
.upload-content {
  width: 300px
}
.avatar-block {
	margin-bottom: 0
}
.form-item-input {
	width: 300px
	box-sizing: border-box
}
.form-input-add-btn {
	position: relative
	top: 5px
	left: 5px
}
.form-item-spec, .form-item-finance, .form-item-image {
	>>>.el-form-item__label {
		padding-left:10px
	}
	>>>..wind-upload__item{
		width: 85px
		height: 85px
	}
}
.unit-mark-icon {
	width:16px
	height: 16px
	position: relative
	top: 4px
}
>>>.el-checkbox{
	margin-right 5px
}
>>>.wind-upload__item{
	width: 85px
	height: 85px
}
>>>.el-checkbox__input.is-disabled+span.el-checkbox__label {
	color: #409EFF
}
</style>
